<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sora2视频生成</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="text"], input[type="file"], select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-sizing: border-box;
        }
        textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-sizing: border-box;
            min-height: 100px;
            resize: vertical;
        }
        button {
            background-color: #007bff;
            color: white;
            padding: 12px 30px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            width: 100%;
        }
        button:hover {
            background-color: #0056b3;
        }
        button:disabled {
            background-color: #6c757d;
            cursor: not-allowed;
        }
        .flash-messages {
            margin-bottom: 20px;
        }
        .flash-success {
            background-color: #d4edda;
            color: #155724;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #c3e6cb;
        }
        .flash-error {
            background-color: #f8d7da;
            color: #721c24;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #f5c6cb;
        }
        .result {
            margin-top: 20px;
            padding: 15px;
            border-radius: 5px;
            display: none;
        }
        .success {
            background-color: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }
        .error {
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }
        .task-info {
            margin-top: 20px;
            padding: 15px;
            background-color: #e9ecef;
            border-radius: 5px;
        }
        .video-preview {
            margin-top: 20px;
            text-align: center;
        }
        .video-preview video {
            max-width: 100%;
            height: auto;
        }
        .download-btn {
            background-color: #28a745;
            margin-top: 10px;
        }
        .download-btn:hover {
            background-color: #218838;
        }
        .hidden {
            display: none;
        }
        .radio-group {
            display: flex;
            gap: 20px;
            margin-bottom: 15px;
        }
        .radio-option {
            display: flex;
            align-items: center;
            gap: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Sora2视频生成</h1>
        
        <div class="flash-messages">
            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    {% for category, message in messages %}
                        <div class="flash-{{ category }}">{{ message }}</div>
                    {% endfor %}
                {% endif %}
            {% endwith %}
        </div>
        
        <form id="videoForm" enctype="multipart/form-data">
            <div class="form-group">
                <label>生成方式:</label>
                <div class="radio-group">
                    <div class="radio-option">
                        <input type="radio" id="textMode" name="mode" value="text" checked>
                        <label for="textMode">文本生成</label>
                    </div>
                    <div class="radio-option">
                        <input type="radio" id="imageMode" name="mode" value="image">
                        <label for="imageMode">图片生成</label>
                    </div>
                </div>
            </div>
            
            <div class="form-group" id="promptGroup">
                <label for="prompt">视频描述:</label>
                <textarea id="prompt" name="prompt" placeholder="请输入视频描述，例如：A cat is playing Minecraft" required></textarea>
            </div>
            
            <div class="form-group" id="imageGroup" class="hidden">
                <label for="image">上传图片:</label>
                <input type="file" id="image" name="image" accept="image/png, image/jpeg, image/jpg">
                <small>支持PNG, JPG, JPEG格式，最大10MB</small>
            </div>
            
            <div class="form-group">
                <label for="orientation">视频方向:</label>
                <select id="orientation" name="orientation">
                    <option value="portrait">竖屏 (9:16)</option>
                    <option value="landscape">横屏 (16:9)</option>
                </select>
            </div>
            
            <button type="submit" id="submitBtn">生成视频</button>
        </form>
        
        <div id="taskInfo" class="task-info hidden">
            <h3>任务状态</h3>
            <p>任务ID: <span id="taskId"></span></p>
            <p>状态: <span id="taskStatus">等待中</span></p>
            <p>进度: <span id="taskProgress">0%</span></p>
        </div>
        
        <div id="videoResult" class="video-preview hidden">
            <h3>生成完成</h3>
            <video controls>
                <source id="videoSource" src="" type="video/mp4">
                您的浏览器不支持视频播放。
            </video>
            <br>
            <a id="downloadLink" class="btn download-btn" download>下载视频</a>
        </div>
    </div>

    <script>
        // 模式切换
        const textMode = document.getElementById('textMode');
        const imageMode = document.getElementById('imageMode');
        const promptGroup = document.getElementById('promptGroup');
        const imageGroup = document.getElementById('imageGroup');
        
        textMode.addEventListener('change', function() {
            if (this.checked) {
                promptGroup.classList.remove('hidden');
                imageGroup.classList.add('hidden');
                document.getElementById('prompt').required = true;
                document.getElementById('image').required = false;
            }
        });
        
        imageMode.addEventListener('change', function() {
            if (this.checked) {
                promptGroup.classList.remove('hidden');
                imageGroup.classList.remove('hidden');
                document.getElementById('prompt').required = true;
                document.getElementById('image').required = true;
            }
        });
        
        // 表单提交
        const form = document.getElementById('videoForm');
        const submitBtn = document.getElementById('submitBtn');
        const taskInfo = document.getElementById('taskInfo');
        const taskIdSpan = document.getElementById('taskId');
        const taskStatusSpan = document.getElementById('taskStatus');
        const taskProgressSpan = document.getElementById('taskProgress');
        const videoResult = document.getElementById('videoResult');
        const videoSource = document.getElementById('videoSource');
        const downloadLink = document.getElementById('downloadLink');
        
        form.addEventListener('submit', async function(e) {
            e.preventDefault();
            
            // 禁用提交按钮
            submitBtn.disabled = true;
            submitBtn.textContent = '正在处理...';
            
            // 获取表单数据
            const formData = new FormData(form);
            
            try {
                // 发送请求
                const response = await fetch('/sora2/generate', {
                    method: 'POST',
                    body: formData
                });
                
                const result = await response.json();
                
                if (result.success) {
                    // 显示任务信息
                    taskIdSpan.textContent = result.task_id;
                    taskInfo.classList.remove('hidden');
                    
                    // 开始轮询任务状态
                    pollTaskStatus(result.task_id);
                } else {
                    alert('生成视频失败: ' + result.error);
                    submitBtn.disabled = false;
                    submitBtn.textContent = '生成视频';
                }
            } catch (error) {
                console.error('Error:', error);
                alert('发生错误: ' + error.message);
                submitBtn.disabled = false;
                submitBtn.textContent = '生成视频';
            }
        });
        
        // 轮询任务状态
        async function pollTaskStatus(taskId) {
            const pollInterval = setInterval(async function() {
                try {
                    const response = await fetch(`/sora2/task_status/${taskId}`);
                    const result = await response.json();
                    
                    if (result.success) {
                        taskStatusSpan.textContent = result.status;
                        taskProgressSpan.textContent = (result.progress * 100).toFixed(1) + '%';
                        
                        if (result.status === 'completed') {
                            clearInterval(pollInterval);
                            // 显示视频结果
                            showVideoResult(result.video_url, result.download_url);
                        } else if (result.status === 'failed') {
                            clearInterval(pollInterval);
                            alert('任务失败: ' + (result.error || '未知错误'));
                            submitBtn.disabled = false;
                            submitBtn.textContent = '生成视频';
                        }
                        // 其他状态（如processing, downloading等）继续轮询
                    } else {
                        clearInterval(pollInterval);
                        alert('获取任务状态失败: ' + result.error);
                        submitBtn.disabled = false;
                        submitBtn.textContent = '生成视频';
                    }
                } catch (error) {
                    console.error('Error polling task status:', error);
                }
            }, 2000); // 每2秒轮询一次
        }
        
        // 显示视频结果
        function showVideoResult(videoUrl, downloadUrl) {
            videoSource.src = videoUrl;
            downloadLink.href = downloadUrl;
            videoResult.classList.remove('hidden');
            
            // 重新启用提交按钮
            submitBtn.disabled = false;
            submitBtn.textContent = '生成视频';
            
            // 重新加载视频元素
            document.querySelector('video').load();
        }
    </script>
</body>
</html>